<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<table class="table">
    <caption>秒杀商品列表</caption>
    <thead>
    <tr>
        <th>商品名称</th>
        <th>商品图片</th>
        <th>秒杀开始时间</th>
        <th>秒杀结束时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="goodsListTbody">
    </tbody>
</table>

</body>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script>
    $(function () {
        var htmlStr = "";
        $.ajax({
            type: 'POST',
            url: "seckillGoods/findByPage",
            contentType: "application/json",
            data: JSON.stringify({
                current: 1,
                size: 10
            }),
            dataType: "json",
            success: function (data, status) {
                console.log("data:", data);
                var records = data.result.records;
                for (var i = 0; i < records.length; i++) {
                    var record = records[i];
                    tmp = '<tr>\n' +
                        '            <td>' + record.goodsName + '</td>\n' +
                        '            <td><img src="' + record.goodsImg + '" class="img-circle"  style="height:80px;" /></td>\n' +
                        '            <td>' + record.startTime + '</td>\n' +
                        '            <td>' + record.endTime + '</td>\n' +
                        '            <td><a href="toDetail?id=' + record.id + '">详情</a></td>\n' +
                        '        </tr>';
                    htmlStr += tmp;
                }
                $("#goodsListTbody").append(htmlStr);
            }
        });

    })

</script>
</html>